<script setup>
import { ref, watch, nextTick } from 'vue'
import { getDeviceCount, getTodayAlarmCount } from '@/assets/api/api'
// import { showLoading } from '@/assets/js/loading'
import { useRoute } from 'vue-router'
const route = useRoute()

// 告警统计
import alarmLineChart from '@/components/alarmLineChart.vue'
// 最新告警
import alarmNew from '@/components/alarmNew.vue'

const alarmLineChartRef = ref(null)
const alarmNewRef = ref(null)
const deviceClassId = ref(route.params.deviceClass)
watch(route, () => {
    deviceClassId.value = route.params.deviceClass
    if (
        deviceClassId.value &&
        route.path == `/fireControl/${deviceClassId.value}`
    ) {
        // showLoading()
        getTodayAlarm()
        getDeviceData()
        nextTick(() => {
            alarmLineChartRef.value.getLineChartData()
            alarmNewRef.value.getData()
        })
    }
})

// 今日报警
import todayAlarm from '@/components/fireControl/todayAlarm.vue'
const alarmData = ref({})
function getTodayAlarm() {
    getTodayAlarmCount({ deviceClass: deviceClassId.value }).then((res) => {
        alarmData.value = res.data
    })
}
// 设备/通道数量
function getDeviceData() {
    getDeviceCount({
        deviceClassify: 2,
        deviceClass: deviceClassId.value,
    }).then((res) => {
        deviceData.value = res.data
    })
}

const deviceData = ref({})
function getData() {
    // showLoading()
    getDeviceData()
    getTodayAlarm()
}
getData()
</script>
<template>
    <el-row :gutter="20">
        <el-col :span="6">
            <div class="dashboard-top-item white-box">
                <div class="top-item-content d-flex">
                    <div class="d-flex-1">
                        <h4>设备数量</h4>
                        <p class="num">{{ deviceData.all_count || '0' }}</p>
                    </div>
                    <img class="icon" src="@/assets/images/icon-device.png" />
                </div>
                <div class="top-item-footer d-flex">
                    <div class="value-item">
                        <span class="dot success mr-5"></span>
                        <span class="d-flex-1">在线数量:</span>
                        <b>{{ deviceData['on-line'] || '0' }}</b>
                    </div>
                    <div class="value-item">
                        <span class="dot danger mr-5"></span>
                        <span class="d-flex-1">离线数量:</span>
                        <b>{{ deviceData['off-line'] || '0' }}</b>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <todayAlarm
                :alarmData="alarmData"
                :deviceClass="deviceClassId"
            ></todayAlarm>
        </el-col>
        <el-col :span="12">
            <alarmNew
                deviceClassify="2"
                :deviceClass="deviceClassId"
                ref="alarmNewRef"
            ></alarmNew>
        </el-col>
    </el-row>

    <div class="white-box mt-20 d-flex-1">
        <alarmLineChart
            title="告警数量"
            deviceClassify="2"
            :deviceClass="deviceClassId"
            ref="alarmLineChartRef"
        ></alarmLineChart>
    </div>
</template>
<style lang="scss" scoped>
.chart-wrap {
    height: 100%;
}
</style>
